<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>Add Account</title>
</head>
<body>
    <h2>Add Account</h2>
    <form id="userForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>
        <button type="button" onclick="addAccount()">Submit</button>
    </form>

    <div id="message"></div>

    <script>
        function addAccount() {
            var user = {
                username: document.getElementById("username").value,
                password: document.getElementById("password").value
                };

            fetch('/account/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
                body: JSON.stringify(account)
            })
            .then(response => response.text())
            .then(data => {
                document.getElementById('message').innerHTML = data;
            })
            .catch(error => {
                document.getElementById('message').innerHTML = 'Failed to add account';
            });
        }
    </script>
</body>
</html>